<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Regular.js • r-model</title>
    <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">

    <script src="../../dist/regular.js"></script>
  </head>
  <body>
    <div id="app" class='container'></div>
    <!-- Templates -->
    <script id="form" type="text/regular">
      <form role="form">
        <div class="form-group">
          <input r-model={lazy} lazy> lazy: {lazy}
          <input r-model={throttle} throttle={100} > throttle: {throttle}
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address(value: {email})</label>
          <input r-model={email}>
          <input r-model={list|join}> {list|json}
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password(value: {password})</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" value='default' r-model='password'>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked  r-model={checked}> Check me out (value: {checked})
          </label>
        </div>
        <div class="form-group">
          radio: {radio}
          <span  on-click={radio="option3"}>radio={radio}</span>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" r-model={radio}>
            Option one is this and that&mdash;be sure to include why its great
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked=checked r-model={radio} >
            Option two can be something else and selecting it will deselect option one
          </label>
        </div>
        <div class="form-group">
          <!-- no wrap in {} is allowed -->
          {textarea}
          <textarea class="form-control" rows="3" r-model='textarea'>hahah</textarea>
        </div>
        <p>{select}</p>
        <select class="form-control" id='select' r-model='select'>
          <option selected value="1">1</option>
          <option value="2">2</option>
          <option value='3'>3</option>
          <option value="4">4</option>
          <option value='5'>5</option>
        </select>

        <select class='form-control' id='select' r-model='select2'>
          <r-option value="2">2</r-option>
          <r-option value='3'>3</r-option>
          <r-option value="4">4</r-option>
          <r-option value='5'>5</r-option>
        </select>

        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </script>

    <script>

    var RegularOption = Regular.extend({
      name: 'r-option',
      template: '<option ref=option value={value}>{#inc this.$body}</option>',
      init: function(){
        this.$watch('value', this._checkSelect.bind(this));
      },
      _checkSelect: function(){
        var selectNode = this.findParent();
        if(selectNode._tid) return;
        selectNode._tid = setTimeout(function(){
          selectNode._tid = 0;
        },0);
      },
      findParent: function(){
        var selectNode = this.$refs.option.parentNode;
        if(selectNode && selectNode.tagName === 'SELECT') return selectNode;
      },
      destroy: function(){
        this.supr()
        this._checkSelect();
      }
    });

    var Modal = Regular.extend({template: '#form'})
      .filter("join", {
        set: function(str){
          return str.split(",");
        },
        get: function(list){
          return list.join(",");
        }
      });

    var app = new Modal({
      data: {
        list: [],
        select: '11'
      }
    }).$inject("#app");


    app.$watch("email", function(value){
      if(value.indexOf("@") === -1){
        app.data.email = value + "@";
      }
    });
    app.$watch("select", function(value){
      if(value == 2){
        app.data.select = 4
      }
    });

    </script>
  </body>
</html>
